<template>
  <div class="app-container">
    <div class="searchform">
      <!-- 查询条件 -->
      <el-form ref="searchForm" :model="search" size="mini" label-width="90px">
        <el-row :gutter="6">
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="activityPageTheme" label="活动页主题">
              <el-input v-model="search.activityPageTheme" clearable/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="commentsTime" label="评论日期">
              <el-date-picker v-model="search.commentsTime" value-format="yyyy-MM-dd" type="date"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="haveRespond" label="是否已回复">
              <r-select v-model="search.haveRespond" clearable type="1004"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="selectedComment" label="精选评论">
              <r-select v-model="search.selectedComment" clearable type="1004"/>
            </el-form-item>
          </el-col>
          <div style="text-align:right">
            <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询
            </el-button>
            <el-button icon="el-icon-refresh" @click="resetForm('searchForm')">重置
            </el-button>
          </div>
        </el-row>
      </el-form>
    </div>
    <!-- 活动信息列表 -->
    <div class="table">
      <div class="tableHead">
        <div class="tabletitle">活动评论维护</div>
        <div class="btnGroup">
          <el-button-group>
            <el-button type="primary" icon="el-icon-download" @click="exportData" >导出</el-button>
          </el-button-group>
        </div>
      </div>
      <baseTable ref="table" @chaneg-size="changeSizeHandle" @chaneg-page="changePageHandle">
        <el-table-column type="index" label="序号" min-width="50"/>
        <el-table-column align="center" label="操作" min-width="150">
          <template slot-scope="scope">
            <el-tooltip class="item" content="明细" placement="bottom">
              <el-button type="text" style="font-size: 20px;" icon="el-icon-document" @click="detailOpen(scope.row)"/>
            </el-tooltip>
            <el-tooltip class="item" content="回复" placement="bottom">
              <el-button type="text" style="font-size: 20px;" icon="el-icon-chat-round" @click="respondOpen(scope.row)"/>
            </el-tooltip>
            <el-tooltip class="item" content="精彩评论" placement="bottom">
              <el-button v-if="scope.row.SELECTED_COMMENTS === 10041002" type="text" style="font-size: 20px;" icon="el-icon-position" @click="publishComments(scope.row)"/>
            </el-tooltip>
            <el-tooltip class="item" content="撤销" placement="bottom">
              <el-button v-if="scope.row.SELECTED_COMMENTS === 10041001" type="text" style="font-size: 20px;" icon="el-icon-remove-outline" @click="cancelComments(scope.row)"/>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="ACTIVITY_PAGE_THEME" label="活动页主题" min-width="120" />
        <el-table-column prop="COMMENTS_LIMIT" label="评论内容" min-width="150"/>
        <el-table-column prop="REVIEWER" label="评论人" min-width="120"/>
        <el-table-column :formatter="dateFormat" prop="COMMENTS_TIME" label="评论时间" min-width="150" />
        <el-table-column :formatter="filterCode" prop="SELECTED_COMMENTS" label="是否精彩评论" min-width="100" type="1004"/>
        <el-table-column :formatter="filterCode" prop="HAVE_RESPOND" label="是否已回复" min-width="100" type="1004"/>
        <el-table-column prop="RESPOND_LIMIT" label="回复内容" min-width="150"/>
      </BaseTable>
    </div>

    <actMsgDetail :open-detail.sync="openDetail" :msg-info="msgInfo"/>

    <el-dialog
      v-dialogDrag
      ref="editDialog"
      :close-on-click-modal="false"
      :visible.sync="respondDialog"
      :before-close="respondClose"
      title="回复评论"
      width="50%"
    >
      <!-- 查询条件 -->
      <el-input v-model="respondForm.respond" type="textarea" placeholder="请输入回复内容"/>
      <div slot="footer" class="dialog-footer" style="text-align:center;">
        <el-button type="text">
          <i class="el-icon-search magnifier" />
        </el-button>
        <el-button type="primary" @click="confirmRespond">确 定</el-button>
        <el-button @click="respondClose">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryMsg, exportMsg, publishComments, cancelComments, respond } from '@/api/commodity/activityManage/actMsgMaintenance.js'
import BaseTable from '@/components/BaseTable'
import filtercode from '@/components/Checkbox/filtercode'
import rSelect from '@/components/Select/Select'
import actMsgDetail from './actMsgDetail.vue'
import formMixins from '@/mixins/formMixins'
import moment from 'moment'
import { exportFile } from '@/utils'
// eslint-disable-next-line no-unused-vars
import _ from 'lodash'

export default {
  name: 'ActMsgMaintenance',
  components: {
    BaseTable,
    rSelect,
    filtercode,
    actMsgDetail
  },
  mixins: [formMixins],
  data() {
    return {
      respondDialog: false,
      openDetail: false,
      isShowTooltip: true,
      msgInfo: {},
      respond: '',
      respondForm: {
        msgId: '',
        respond: '',
        status: 10041001
      },
      // 搜索栏
      search: {
        limit: 10,
        pageNum: 1,
        activityPageTheme: '',
        commentsTime: '',
        haveRespond: '',
        selectedComment: ''
      }
    }
  },
  computed: {},
  mounted() {
    this.searchHandle()
  },
  methods: {
    // 查询活动留言信息
    searchHandle() {
      const table = this.$refs['table']
      queryMsg(this.search)
        .then(res => {
          for (let i = 0; i < res.rows.length; i++) {
            if (res.rows[i].COMMENTS.length >= 20) {
              res.rows[i].COMMENTS_LIMIT = res.rows[i].COMMENTS_LIMIT + '......'
            }
            if (res.rows[i].RESPOND != null && res.rows[i].RESPOND != '') {
              if (res.rows[i].RESPOND.length >= 20) {
                res.rows[i].RESPOND_LIMIT = res.rows[i].RESPOND_LIMIT + '......'
              }
            }
          }
          table.complete().filData(res)
        })
        .catch(err => {
          table.complete()
        })
    },

    // 打开详情页
    detailOpen(data) {
      this.msgInfo = {
        ACTIVITY_PAGE_THEME: data.ACTIVITY_PAGE_THEME,
        REVIEWER: data.REVIEWER,
        COMMENTS_TIME: data.COMMENTS_TIME,
        SELECTED_COMMENTS: data.SELECTED_COMMENTS,
        HAVE_RESPOND: data.HAVE_RESPOND,
        COMMENTS: data.COMMENTS,
        RESPOND: data.RESPOND
      }
      this.openDetail = true
    },

    respondOpen(data) {
      this.respondDialog = true
      console.log(data)
      this.respondForm.respond = data.RESPOND
      this.respondForm.msgId = data.MSG_ID
    },

    respondClose() {
      this.respondDialog = false
      this.respondForm.respond = ''
      this.respondForm.msgId = ''
      this.searchHandle()
    },

    confirmRespond() {
      respond(this.respondForm, this.respondForm.msgId)
        .then(() => {
          this.$message({
            type: 'success',
            message: '回复成功!'
          })
          this.respondClose()
        })
        .catch(err => {
        })
    },

    // 将评论发表为精彩评论
    publishComments(data) {
      publishComments(data.MSG_ID).then(res => {
        this.$message({
          type: 'success',
          message: '发布成功'
        })
        this.searchHandle()
      }).catch(err => {
      })
    },

    // 针对精彩评论进行撤销
    cancelComments(data) {
      cancelComments(data.MSG_ID).then(res => {
        this.$message({
          type: 'success',
          message: '撤销成功'
        })
        this.searchHandle()
      }).catch(err => {
      })
    },

    // 导出
    exportData() {
      exportMsg(this.search)
        .then(res => {
          for (let i = 0; i < res.length; i++) {
            res[i].COMMENTS_TIME = moment(res[i].COMMENTS_TIME).format('YYYY-MM-DD HH:mm')
          }
          const option = {
            tHeader: ['活动页主题', '评论人', '是否精选评论', '评论内容', '评论时间', '是否已回复', '回复内容'],
            filterVal: ['ACTIVITY_PAGE_THEME', 'REVIEWER', 'SELECTED_COMMENTS', 'COMMENTS', 'COMMENTS_TIME', 'HAVE_RESPOND', 'RESPOND'],
            table: res,
            fileName: '活动留言维护查询导出'
          }
          exportFile(option, () => {
          })
        })
        .catch(err => {})
    },

    dateFormat: function(row, column) {
      var date = row[column.property]
      if (date) {
        return moment(date).format('YYYY-MM-DD HH:mm')
      } else {
        return ''
      }
    }
  }
}
</script>

<style scoped>

</style>
